<template>
    <div class="wrapper main_wrap" ref="main" style="height: 100vh;overflow-y: hidden">
        <div class="header_wrap">
            <page_header :content="content"></page_header>
        </div>

        <div class="main_content" style="margin-top: 50px">
            <el-form :model="form_data" :rules="rules" ref="dialog_form" label-position="top" size="mini"
                     style="width: 94%;margin-left: 3%;padding: 3% 0;box-sizing: border-box">

                <el-form-item label="经销商" prop="name">
                    <el-input size="medium" v-model="form_data.name" placeholder="请输入经销商名称"></el-input>
                </el-form-item>
                <el-form-item label="活动主题" prop="theme">
                    <el-input size="medium" v-model="form_data.theme" placeholder="请输入活动主题"></el-input>
                </el-form-item>
                <el-form-item label="门店地址" prop="address">
                    <el-input size="medium" v-model="form_data.address" placeholder="请输入门店地址"></el-input>
                </el-form-item>
                <el-form-item label="分享描述" prop="describe">
                    <el-input size="medium" v-model="form_data.describe" placeholder="请输入分享描述"></el-input>
                </el-form-item>
                <el-form-item label="支付金额" prop="money">
                    <el-input size="medium" v-model.number="form_data.money" placeholder="请输入支付金额"></el-input>
                </el-form-item>
                <el-form-item label="系列" prop="level">
                    <div>
                        <el-radio v-model="form_data.level" :label="1" :key="1">海洋</el-radio>
                        <el-radio v-model="form_data.level" :label="2" :key="2">王朝</el-radio>
                    </div>
                </el-form-item>
                <el-form-item label="活动时间" prop="time">
                    <el-date-picker style="width: 100%" size="medium" v-model="form_data.time" type="datetimerange"
                                    range-separator="至"
                                    start-placeholder="开始日期" end-placeholder="结束日期"
                                    :default-time="['09:00:00', '18:00:00']">
                    </el-date-picker>
                </el-form-item>
                <el-form-item>
                    <div style="display: flex;justify-content: center;margin-top: 20px">
                        <el-button size="medium" type="primary" @click="submit_form('dialog_form')">提交</el-button>
                        <el-button size="medium" @click="is_dialog = false">取消</el-button>
                    </div>
                </el-form-item>
            </el-form>
            <!-- 成功提示框-->

        </div>
    </div>
</template>

<script>
    import page_header from "../../components/page_header";
    import pagination from "../../components/pagination";
    import _time from "../../utils/_time";
    import _float from "../../utils/_float";
    import api_activity from "../../api/api_activity";
    import _router from "../../common/_router";

    export default {
        components: {
            page_header,
            pagination
        },
        data() {
            return {
                content: '活动申请',
                form_data: {
                    name: '',
                    theme: '',
                    address: '',
                    tel: '',
                    describe: '',
                    money: '',
                    level: 1,
                    time: [], //时间范围
                    stime: 0, //开始时间
                    etime: 0, //结束时间
                },
                rules: {
                    name: [{required: true, message: '请输入经销商', trigger: 'blur'}],
                    theme: [{required: true, message: '请输入活动主题', trigger: 'blur'}],
                    address: [{required: true, message: '请输入门店地址', trigger: 'blur'}],
                    describe: [{required: true, message: '请输入活动描述', trigger: 'blur'}],
                    money: [{required: true, message: '请输入活动金额', trigger: 'blur'}],
                    level: [{required: true, message: '请选择系列', trigger: 'blur'}],
                    time: [{required: true, message: '请选择活动时间', trigger: 'blur'}],
                },
            }
        },
        created() {
        },
        methods: {
            // 转换金额
            toYuan(row, k) {
                return _float.to_fixed(row[k] / 100)
            },
            to_yuan(v) {
                return _float.to_fixed(v / 100)
            },
            to_fen(v) {
                return parseInt(v * 100)
            },

            //清空表单
            reset_form() {
                this.form_data = {
                    id: '',
                    name: '',
                    theme: '',
                    address: '',
                    describe: '',
                    money: '',
                    level: 1,
                    time: [], //时间范围
                    stime: 0, //开始时间
                    etime: 0, //结束时间
                }
            },
            // 创建活动
            create_activity() {
                this.reset_form()
                this.is_dialog = true
            },
            submit_form(ruleForm) {
                let that = this;
                that.$refs[ruleForm].validate((valid) => {
                    if (!valid) return;
                    // 转换
                    this.form_data.stime = this.form_data.time != null &&
                    this.form_data.time.hasOwnProperty(0) &&
                    this.form_data.time[0] ? this.form_data.time[0] : 0;
                    this.form_data.etime = this.form_data.time != null &&
                    this.form_data.time.hasOwnProperty(1) &&
                    this.form_data.time[1] ? this.form_data.time[1] : 0;

                    this.form_data.stime = _time._to_timestmap(this.form_data.stime);
                    this.form_data.etime = _time._to_timestmap(this.form_data.etime);

                    let name = this.form_data.name;
                    let theme = this.form_data.theme;
                    let address = this.form_data.address;
                    let describe = this.form_data.describe;
                    let money = this.to_fen(parseFloat(this.form_data.money));
                    let level = this.form_data.level;
                    let stime = this.form_data.stime;
                    let etime = this.form_data.etime;

                    api_activity.apply(name, theme, address, describe, money, level, stime, etime, function (data) {
                        _router.jmp_url('/manage/index')
                    })
                })
            }

        }
    }
</script>

<style scoped lang="less">
    .header_wrap{
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 50px;
        z-index: 10;
    }
    .main_content {
        width: 100%;
        height: calc(100% - 50px);
        overflow-y: auto;
        overflow-x: hidden;
        background: #fff
    }

    .el-form-item {
        margin-bottom: 15px !important;
    }

    /deep/ .el-form--label-top .el-form-item__label {
        padding-bottom: 0px !important;
    }

    /deep/ .el-form-item__label {
        height: 30px;
        line-height: 30px;
    }

</style>
